<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input v-model="data.name" style="width: 300px; margin-right: 10px" placeholder="请输入用户姓名"></el-input>
      <el-button type="primary" @click="load">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <div class="card">

      </div>

    <el-table :data="data.tableData"  stripe>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="头像" prop="avatar">
      <template v-slot="scope">
        <el-image :src="scope.row.avatar" style="width: 40px; height: 40px; border-radius: 50%"></el-image>
      </template>
      </el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="积分" prop="integral"></el-table-column>
      <el-table-column label="角色" prop="role"></el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template #default="scope">
          <el-button type="primary"  v-if="scope.row.integral > 20 && scope.row.number ==='1'"  @click="applyForVolunteer(scope.row)">审核</el-button>
          <el-button type="danger"  v-if="scope.row.integral > 20 && scope.row.number ==='1'"  @click="rejectApplication(scope.row)">驳回</el-button>
          <div type="danger" v-if="scope.row.integral > 20 && scope.row.number ==='2'" style="color: green;">审核通过</div>

        </template>
      </el-table-column>
    </el-table>

    <div class="card" >
      <el-pagination background layout="prev, pager, next" v-model:page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" @current-change="changePage"/>
    </div>

  </div>
  </template>


<script setup>
import request from "@/utils/request";
import {reactive} from "vue";
import {ElMessageBox, ElMessage} from "element-plus";


/*
* 头像文件上传
* */
const uploadUrl = import.meta.env.VITE_BASE_URL + '/files/upload1'


const data = reactive({
  formVisible: false,
  form: {},
  tableDate:[],
  pageNum:1,
  pageSize:8,
  total:0,
  name:null
})

const load = () => {
  request.get('/user/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: data.name
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data?.list
      data.total = res.data?.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const changePage = (pageNum) => {
  data.pageNum =pageNum
  load()
}



const reset = () =>{
  data.name=null
  load()
}

const handleImgSuccess = (res) => {
  data.form.avatar = res.data
}


// 申请成为志愿者的功能处理
const applyForVolunteer = (row) => {
  // 弹出审核框，提供“同意”和“再想想”两个选项
  ElMessageBox.confirm('请选择审核结果', '确认', {
    confirmButtonText: '同意',
    cancelButtonText: '再想想',
    type: 'warning',
    showCancelButton: true,
    closeOnClickModal: false,
  }).then(() => {
    // 如果用户选择同意
    row.number = '2';
    data.form = {
      id: row.id,
      username: row.username,
      avatar: row.avatar,
      name: row.name,
      sex: row.sex,
      integral: row.integral,
      role: row.role,
      number: row.number,
      password: row.password,
    };
    update();
    data.volunteer = {
      id: row.id,
      username: row.username,
      avatar: row.avatar,
      name: row.name,
      sex: row.sex,
      password: row.password,
      role: "VOLUNTEER",
      petId: 1,
      area: "北京",
    };
    add();
  }).catch(() => {
  });
};

// 驳回申请的功能处理
const rejectApplication = (row) => {
  // 弹出确认对话框，询问用户是否确认驳回申请
  ElMessageBox.confirm('确定要驳回该申请吗？', '警告', {
    confirmButtonText: '驳回',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 用户确认驳回
    row.number = '4'; // 假设这里使用'0'表示驳回
    data.form = {
      id: row.id,
      username: row.username,
      avatar: row.avatar,
      name: row.name,
      sex: row.sex,
      integral: row.integral,
      role: row.role,
      number: row.number,
      password: row.password,
    };
    update(); // 更新状态
    ElMessageBox.alert('申请已被驳回。', '提示', { type: 'success' });
  }).catch(() => {
    // 用户点击取消或关闭对话框，什么都不做
  });
};

const update = () => {
  request.put('/user/update', data.form).then(res => {
    if (res.code === '200') {
      ElMessage.success('操作成功')
      data.formVisible = false
      load()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const add = () => {
  request.post('/volunteer/add', data.volunteer).then(res => {
    if (res.code === '200') {
      ElMessage.success('操作成功')
      data.formVisible = false
      load()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

load();
</script>